<template>
  <div class="tab_bar">
    <ul>
      <li
        v-for="(item, index) in title"
        :key="index"
        @click="goto(index)"
        :class="{ active: currentIndex === index }"
      >
        <router-link :to="item.path">
          <i class="iconfont" :class="item.icon"></i>
          <span>{{ item.message }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      currentIndex: 0,
      title: [
        {
          message: '首页',
          icon: 'icon-apartment-home',
          path: '/home'
        },
        {
          message: '分类',
          icon: 'icon-category01',
          path: '/category'
        },
        {
          message: '购物车',
          icon: 'icon-che-copy',
          path: '/cart'
        },
        {
          message: '我的',
          icon: 'icon-wodedangxuan-copy',
          path: '/user'
        }
      ]
    }
  },
  methods: {
    goto(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style lang="less" scoped>
.tab_bar {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  // max-width: 375px;
  background-color: #f6f6f6;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      .iconfont {
        font-size: 20px;
      }
      span {
        margin-top: 3px;
        font-size: 14px;
      }
    }
  }
}

.active {
  i,
  span {
    color: var(--color-a);
  }
}
</style>
